<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件解析页面</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f5f5f5;
        }

        /* 页面分为上、中、下三部分 */
        .section {
            width: 80%;
            max-width: 600px;
            margin: 20px 0;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        /* 文件上传区域 */
        .upload-section input[type="file"] {
            display: none;
        }

        .upload-section label {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }

        .upload-section label:hover {
            background-color: #0056b3;
        }

        .file-name {
            margin-top: 10px;
            font-size: 14px;
            color: #333;
        }

        /* 解析按钮 */
        .parse-button {
            padding: 10px 20px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .parse-button:hover {
            background-color: #218838;
        }

        /* 结果展示表格 */
        .result-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .result-table th,
        .result-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .result-table th {
            background-color: #f8f9fa;
            font-weight: bold;
            width: 30%;
        }

        /* 加载中弹窗 */
        .loading-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .loading-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
<!-- 上传文件部分 -->
<div class="section upload-section">
    <label for="file-upload">选择文件</label>
    <input type="file" id="file-upload">
    <div class="file-name">未选择文件</div>
</div>

<!-- 解析按钮部分 -->
<div class="section parse-section">
    <button class="parse-button" onclick="parseFile()">解析文件</button>
</div>

<!-- 结果展示部分 -->
<div class="section result-section">
    <table class="result-table">
        <tbody>
        <tr>
            <th>公文标题</th>
            <td>-</td>
        </tr>
        <tr>
            <th>篇幅是否合规</th>
            <td>-</td>
        </tr>
        <tr>
            <th>附件是否齐全</th>
            <td>-</td>
        </tr>
        <tr>
            <th>信息准确程度</th>
            <td>-</td>
        </tr>
        <tr>
            <th>要素是否齐全</th>
            <td>-</td>
        </tr>
        <tr>
            <th>满足条例规定</th>
            <td>-</td>
        </tr>
        <tr>
            <th>文理是否通顺</th>
            <td>-</td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 加载中弹窗 -->
<div class="loading-modal" id="loading-modal">
    <div class="loading-content">
        <p>正在加载中...</p>
    </div>
</div>

<script>
    // 文件上传逻辑
    const fileUpload = document.getElementById('file-upload');
    const fileNameDisplay = document.querySelector('.file-name');

    fileUpload.addEventListener('change', function (event) {
        const file = event.target.files[0];
        if (file) {
            fileNameDisplay.textContent = `已选择文件: ${file.name}`;
        } else {
            fileNameDisplay.textContent = '未选择文件';
        }
    });

    // 解析文件逻辑
    function parseFile() {
        const file = fileUpload.files[0];
        if (!file) {
            alert('请先选择文件');
            return;
        }

        // 显示加载中弹窗
        const loadingModal = document.getElementById('loading-modal');
        loadingModal.style.display = 'flex';

        // 模拟后端请求（替换为实际的后端URL）
        const backendUrl = '/parse'; // 替换为实际的后端URL
        const formData = new FormData();
        formData.append('file', file);

        fetch(backendUrl, {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                // 隐藏加载中弹窗
                loadingModal.style.display = 'none';

                // 更新表格数据
                const tableRows = document.querySelectorAll('.result-table tbody tr');
                /*console.log(data.result);*/
                tableRows[0].querySelector('td').textContent = data.result.docTitle || '-';
                tableRows[1].querySelector('td').textContent = data.result.islengthcompliance || '-';
                tableRows[2].querySelector('td').textContent = data.result.iscompletionlevel || '-';
                tableRows[3].querySelector('td').textContent = data.result.accuracyinformation || '-';
                tableRows[4].querySelector('td').textContent = data.result.isCompleteelements || '-';
                tableRows[5].querySelector('td').textContent = data.result.ismeetrequirements || '-';
                tableRows[6].querySelector('td').textContent = data.result.isunitycoherence || '-';
            })
            .catch(error => {
                // 隐藏加载中弹窗
                loadingModal.style.display = 'none';
                alert('解析失败，请重试');
                console.error('Error:', error);
            });
    }
</script>
</body>
</html>